<template>
	<view>
		<u-sticky bgColor="#fff">
			<!-- <view class="help-pubuBox">
				<u-search placeholder="搜索风险单元/风险点名称" :clearabled="true" height="40" shape="square" color="#2B2B2B"
					v-model="title" @search="chaxun" @custom="$dianji(chaxun,'onoff')" :actionText="'搜索'"
					:inputStyle="inputStyle" :actionStyle="actionStyle"></u-search>
			</view> -->
			<view class="mySearch">
				<u-search placeholder="搜索风险单元/风险点名称" :clearabled="true" v-model="title" @search="chaxun"
					@change="chaxun" @custom="chaxun" height="40" shape="square" color="#2B2B2B" :showAction="false">
				</u-search>
			</view>
			<view class="dropdown" v-if="showDropdown">
				<zb-dropdown-menu :zIndex="89" active-color="#0F53AC">
					<zb-dropdown-item :options="useOption" v-model="useValue" @change="(e)=>{handleSelect(e,1)}"
						name="first">
					</zb-dropdown-item>
					<zb-dropdown-item v-if="useValue !== 0 " :options="eqOption" v-model="eqValue"
						@change="(e)=>{handleSelect(e,2)}" name="two">
					</zb-dropdown-item>
				</zb-dropdown-menu>
			</view>
		</u-sticky>

		<view class="tab-page">
			<view class="list-wrapper" v-for="(item,index) in riskDataList" :key="index">
				<view class="list-info">
					<view class="list-title">
						<view class="title-left">
							{{item.pointName}}
						</view>
						<view class="title-right"
							:class="[item.identifyStatus == 0?'title-ongoing':item.riskLevel == 1?'title-finish':item.riskLevel == 2?'.title-close':item.riskLevel == 3?'title-yellow':item.riskLevel == 4?'title-dyz':'title-ongoing']">
							{{item.identifyStatus == 0?'待辨识':item.riskLevel == 1?'重大风险':item.riskLevel == 2?'较大风险':item.riskLevel == 3?'一般风险':item.riskLevel == 4?'低风险':'待辨识'}}
						</view>
					</view>
				</view>
				<view class="list-main">
					<view class="gz-desc">
						<view class="title">风险点位置</view>
						<view class="desc-reason">{{item.location}}</view>
					</view>
					<view class="item-main">
						<view class="main-left">
							<view class="txt1">风险单元</view>
							<view class="txt2">{{item.unitName}}</view>
						</view>
						<view class="main-left">
							<view class="txt1">创建时间</view>
							<view class="txt2">{{item.createTime}}</view>
						</view>
					</view>
				</view>
				<view class="item-btn">
					<view v-if="item.identifyStatus != 0" class="chuku" @click="handleToRecord(item)">
						{{`辨识记录（${item.identificationNum||0}）`}}</view>
					<view v-if="item.identifyStatus != 0" class="su-line"></view>
					<view :class="[item.identifyStatus != 0?'ruku':'ruku-once']" @click="togoRepairpage(item)">
						{{item.draftFlag!=1?'新增辨识':'继续辨识'}}</view>
				</view>
			</view>
			<u-loadmore v-if="total>5" :status="status" :line="true" />
			<view class="empty-data" v-if="riskDataList.length==0">
				<u-empty mode="data" :marginTop="100"></u-empty>
			</view>
			<view class="bottom-subside" style='height: 22px;'></view>
		</view>

		<view class="fixed-btn" @click="addRiskPoint">
			<view class="btn-icon">
				<image src="../../../static/images/index/weiwai.png"></image>
			</view>
			<view class="btn-txt">风险点</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDropdown: true,
				//搜索值
				title: '',
				//按钮样式
				actionStyle: {
					color: '#0F53AC',
					fontSize: "32rpx",
				},
				inputStyle: {
					fontSize: '32rpx',
				},
				//使用状态option
				useOption: [{
						text: '辨识状态',
						value: ''
					}, {
						text: '待辨识',
						value: 0
					},
					{
						text: '已辨识',
						value: 1
					},
				],
				useValue: '',
				//设备状态option
				eqOption: [{
						text: '风险等级',
						value: ''
					},
					{
						text: '重大风险',
						value: 1
					},
					{
						text: '较大风险',
						value: 2
					},
					{
						text: '一般风险',
						value: 3
					},
					{
						text: '低风险',
						value: 4
					},
				],
				eqValue: '',
				//设备数据列表
				riskDataList: [],

				page: 1,
				total: 0,
				status: 'loadmore',
				//接口请求数据
				params: {
					pn: 1,
					ps: 5,
					keyword: '',
					identifyStatus: '', //辨识状态；0.待辨识；1.已辨识；
					riskLevel: '' //风险等级；1.重大风险；2.较大风险；3.一般风险；4.低风险；
				},
				onoff: true,
			}
		},
		onShow() {
			//请求之前先清空数据
			this.params.pn = 1;
			this.riskDataList = []
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.pn = 1;
			this.riskDataList = []
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			//1.获取列表
			getList() {
				uni.$u.http.post(`/check/mobile/riskPoint/pageList`, this.params).then(res => {
					if (res.code == 0) {
						this.riskDataList = this.riskDataList.concat(res.data.records);
						this.pages = res.data.pages;
						this.total = res.data.total;
						uni.stopPullDownRefresh()
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			//2.搜索功能
			//change
			chaxun() {
				//清空数据
				this.total = 0
				this.riskDataList = []
				this.params.pn = 1
				this.params.keyword = this.title
				this.getList()
			},
			//cancel
			cancel() {
				this.title = ''
				this.total = 0
				this.riskDataList = []
				this.params.pn = 1
				this.params.keyword = ''
				this.getList()
			},
			//3.下拉选择 
			handleSelect(e, type) {
				//清空数据
				this.total = 0
				this.riskDataList = []
				this.params.pn = 1
				//传参
				if (type == 1) {
					this.params.identifyStatus = e.value
					this.params.riskLevel = ''
				} else if (type == 2) {
					this.params.riskLevel = e.value
				}
				//查询表单
				this.getList()
			},
			// 辨识记录
			handleToRecord(item) {
				uni.navigateTo({
					url: `/pages/subPackagesA/riskIdtion/riskRecord?pointId=${item.id}`
				})
			},
			// 新增辨识
			togoRepairpage(item) {
				if (item.draftFlag == 1) {
					uni.navigateTo({
						url: `/pages/subPackagesA/riskIdtion/identification?pointId=${item.id}&pointName=${item.pointName}&location=${item.location}&draftIdentifyId=${item.draftIdentifyId}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/subPackagesA/riskIdtion/identification?pointId=${item.id}&pointName=${item.pointName}&location=${item.location}`
					})
				}

			},
			// 新增风险点
			addRiskPoint() {
				uni.navigateTo({
					url: `/pages/subPackagesA/riskIdtion/addRiskPoint`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.help-pubuBox {
		padding: 22rpx;
		background: #fff;
	}

	.mySearch {
		background-color: #fff;
		padding: 28rpx 32rpx;

		.u-input {
			background-color: #f2f2f2;
		}
	}

	.dropdown {
		border-top: 1px solid rgba(242, 242, 242, 1);
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}

	.fixed-btn {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		z-index: 99;
		width: 160rpx;
		height: 160rpx;
		opacity: 1;
		background: rgba(15, 83, 172, 1);
		box-shadow: 0px 2px 6px rgba(10, 61, 128, 0.4);
		border-radius: 50%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #fff;

		.btn-icon {

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

	}

	.tab-page {

		.list-wrapper {
			border-top: 14rpx solid #F5F5F5;
			border-bottom: 1px solid #F5F5F5;

			.list-info {
				background: #fff;
				padding: 34rpx 30rpx 18rpx;

				.list-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-left {
						width: 80%;
						font-size: 32rpx;
						font-weight: 500;
						color: #2B2B2B;
						word-wrap: break-word;
						word-break: break-all;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.title-right {
						// width: 96rpx;
						// height: 48rpx;
						// line-height: 48rpx;
						text-align: center;
						border-radius: 8rpx;
						font-size: 24rpx;
						padding: 8rpx 16rpx;
					}

					.title-ongoing {
						color: #858585;
						background-color: #DBDBDB;
					}

					.title-dyz {
						color: #fff;
						background-color: #04AFF1;
					}

					.title-yellow {
						color: #2B2B2B;
						background-color: #F9FF03;
					}

					.title-close {
						color: #2B2B2B;
						background-color: #FAC10D;
					}

					.title-finish {
						color: #fff;
						background-color: #FA0101;
					}
				}

			}

			.list-main {
				padding: 16rpx 30rpx 32rpx;
				background: #fff;
				border-top: 1px solid #f2f2f2;
				border-bottom: 1px solid #f2f2f2;

				.item-main {
					display: flex;
					justify-content: space-between;
					padding: 16rpx 0 0;

					.main-left {
						width: 50%;
						text-align: left;

						.txt1 {
							color: #8c8c8c;
							font-size: 30rpx;
						}

						.txt2 {
							color: #4D4D4D;
							font-size: 32rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-top: 8rpx;
						}
					}
				}

				.txt4 {
					color: #fa4016;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
				}

				.gz-desc {
					padding: 0;

					.title {
						font-size: 30rpx;
						color: #8c8c8c;
					}

					.desc-reason {
						font-size: 32rpx;
						color: #2b2b2b;
						margin-top: 8rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						word-break: break-all;
					}
				}
			}

			.item-btn {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 24rpx 0;
				background: #fff;

				.chuku {
					width: 45%;
					font-size: 34rpx;
					color: #666666;
					text-align: center;
				}

				.ruku {
					width: 45%;
					font-size: 34rpx;
					color: #0F53AC;
					text-align: center;
				}

				.ruku-once {
					width: 100%;
					font-size: 34rpx;
					color: #0F53AC;
					text-align: center;
				}

				.su-line {
					width: 4rpx;
					height: 50rpx;
					background: #f2f2f2;
				}
			}
		}

	}
</style>
